<script setup>
import { ref } from 'vue'
import TestRef from '@/components/test-ref.vue'

// 模版引用，获取 DOM 和 组件
const inp = ref(null)

// 获取组件
const refTest = ref(null)

const getComponent = () => {
  console.log(refTest.value)
  // 调用子组件方法
  refTest.value.sayHi()
}
</script>

<template>
  <div>
    <input ref="inp" type="text">
    <button @click="inp.focus()" class="myButton">点击聚焦输入框</button>
  </div>
  <TestRef ref="refTest"></TestRef>
  <button @click="getComponent" class="myButton">获取组件</button>
</template>

<style scoped>
.myButton {
  padding: 5px 30px;
  background-color: #63ccf6;
  border: 1px #0a8fff solid;
  color: white;
  border-radius: 5px;
}
</style>